<!--消息部分-->
<template>
  <div class="message_wrapper" >
      <div class="header">
        <div class="header_left">
          <h1>
            消息
            <span>(23)</span>
          </h1>
          <span>全部已读</span>
        </div>
        <div class="header_right">设置</div>
      </div>
      <div class="message_list">
        <div class="message">
          <div class="message_image">
            <img src="../assets/head.jpg" alt/>
          </div>
          <div class="message_info">
            <div class="message_info_top">
              <span>优惠福利</span>
              <span>24/07/05</span>
            </div>
            <div class="message_info_bottom">美团外卖：信我！真的超划算</div>
          </div>
        </div>
      </div>
      <h2>2周前的消息</h2>
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="item_image">
            <span v-if="item.count>0">{{item.count}}</span>
          </div>
          <div class="item_info">
            <div class="item_info_top">
              <span>{{item.name}}</span>
              <span>2024.07.03</span>
            </div>
            <div class="item_info_bottom">{{item.tip}}</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
    
  },
  data() {
    return {
      list: [
        {
          name:'美团视频',
          tip:'签到即送领10元',
          count:5
        },
        {
          name:'东北人家手工水饺福利粉丝群',
          tip:'[折扣榜]本店今日折扣商品来袭，赶快来',
          count:3

        },
        {
          name:'美团币',
          tip:'你有一笔抵扣金待领取',
          count:2

        },
        {
          name:'蒙古兄弟-碳烤肉烤鸡',
          tip:'亲爱的顾客，我们“不打烊”~推荐您使用',
          count:0
        },
        {
          name:'订单动态',
          tip:'商品已送达',
          count:7

        },
        {
          name:'美团钱包',
          tip:'您的准时包和放心吃保障已生效',
          count:2
        },
        {
          name: '乖niuniu热辣烧烤',
          tip: '[邀您加入粉丝群]',
          count: 1
        },
        {
          name:'美团乐园',
          tip:'你有一笔现金待领取',
          count:1
        },

      ]
    }
  },
}
</script>

<style lang="scss" scoped >
.message_wrapper {
  padding: 20px 10px 0;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    h1 {
      font-size: 22px;
      span {
        font-size: 16px;
        margin-right: 8px;
      }
    }
    .header_left {
      display: flex;
      align-items: flex-end;
    }
    .header_right{
      font-size: 14px;
    }
  }
  .message_list {
    margin-top: 20px;
    .message {
      display: flex;
      align-items: center;
      .message_image {
        width: 50px;
        height: 50px;
        margin-right: 8px;
        padding-bottom: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
      .message_info {
        flex: 1;
        border-bottom: 1px solid rgba(147, 139, 139, 0.096);
        padding-bottom: 10px;
        .message_info_top {
          margin-bottom: 8px;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          span {
            &:last-child {
              color: #ddd;
              font-size: 14px;
            }
          }
        }
        .message_info_bottom {
          color: rgb(164, 151, 151);
          font-size: 14px;
        }
      }
    }
  }
  h2 {
    font-size: 16px;
    padding: 10px 0;
    font-weight: 500;
  }
  .list {
    .item {
      display: flex;
      align-items: center;
      padding: 8px 0;
     
      &:last-child {
        .item_info {
          border: none;
        }
      }
      .item_image {
        position: relative;
        width: 50px;
        height: 50px;
        margin-right: 8px;
        padding-bottom: 16px;
        background: url('../assets/avatar.png')no-repeat;
        &
        span {
          position: absolute;
          width: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          top: 0;
          right: 0;
          transform: translate(50%, -50%);
          height: 20px;
          border-radius: 50%;
          background: red;
        }
        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
      &:nth-child(1){
        .item_image{
          background-position: 0 -4px;
        }
      }
      &:nth-child(2){
        .item_image{
          background-position: 0 -75px;
        }
      }
      &:nth-child(3){
        .item_image{
          background-position: 0 -145px;
        }
      }
      &:nth-child(4){
        .item_image{
          background-position: 0 -215px;
        }
      }
      &:nth-child(5){
        .item_image{
          background-position: 0 -285px;
        }
      }
      &:nth-child(6){
        .item_image{
          background-position: 0 -357px;
        }
      }
      &:nth-child(7){
        .item_image{
          background-position: 0 -428px;
        }
      }
      &:nth-child(8){
        .item_image{
          background-position: 0 -500px;
        }
      }
      .item_info {
        flex: 1;
        border-bottom: 1px solid rgba(147, 139, 139, 0.096);
        padding-bottom: 16px;
        .item_info_top {
          margin-bottom: 8px;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          span {
            &:last-child {
              color: #ddd;
              font-size: 14px;
            }
          }
        }
        .item_info_bottom {
          color: rgb(164, 151, 151);
          font-size: 14px;
        }
      }
      .item_image {
        width: 50px;
        height: 50px;
        margin-right: 8px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
      .item_info {
        flex: 1;
        .item_info_top {
          margin-bottom: 8px;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          span {
            &:last-child {
              color: #ddd;
              font-size: 14px;
            }
          }
        }
        .item_info_bottom {
          color: rgb(164, 151, 151);
          font-size: 14px;
        }
      }
    }
  }
}
</style>
